<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html>
<html>
<head>
<title>管理平台</title>
<jsp:include page="../../../include/header.jsp"></jsp:include>
<style type="text/css">
table td {
	text-align: center;
}

table th {
	text-align: center;
}

table {
	empty-cells: show;
	border-collapse: collapse;
	margin: 0 auto;
}
/*排序 */
.querySort {
	position: relative;
}

.down {
	position: absolute;
	top: 12px;
	display: inline-block;
	width: 10px;
	height: 12px;
	margin-left: 8px;
	background: url("${BASE_PATH}/static/images/sprite-arrow.png") 0 61px;
}

.sort .querySort:NTH-OF-TYPE(2) .down {
	top: -3px;
	transform: rotateX(180deg);
}

.querySort:hover .down {
	background: url("${BASE_PATH}/static/images/sprite-arrow.png") 0 21px;
}

.downSort {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 24px;
	opacity: 0;
	cursor: pointer;
}

.upSort {
	position: absolute;
	top: -15px;
	left: 3px;
	width: 18px;
	height: 24px;
	opacity: 0;
	cursor: pointer;
}
</style>
</head>
<body>
	<div id="wrapper" class="row">
		<div class="col-lg-12">
			<div class="panel panel-default">
				<div class="panel-heading">分公司统计信息</div>
				<div class="panel-body hint">
					<div class="col-xs-2 col-md-2 col-lg-2">
						分公司总数 : <span class="label label-info" id="goodsCount"></span>${ tolnumber}
					</div>
					<div class="col-xs-2 col-md-2 col-lg-2">
						上线审核中分公司 : <span class="label label-info" id="chart1State1"></span>${sjshnumber }
					</div>
					<div class="col-xs-2 col-md-2 col-lg-2">
						上线分公司总数: <span class="label label-info" id="chart1State2"></span>${sjnumber }
					</div>
					<div class="col-xs-2 col-md-2 col-lg-2">
						下线分公司总数: <span class="label label-info" id="chart1State4"></span>${xjnumber }</div>
				</div>
			</div>
		</div>
		<!-- 搜索框 -->
		<div class="title-top col-lg-12">
			<label class="search-label">分公司编号：</label><input type="text"
				id="sGoodId" class="form-control search-input width200"
				maxlength="21"> <label class="search-label">选择公司：</label> <select
				id="sSellerId" class="selectpicker pull-left p-l-5"
				multiple="multiple" data-width="12%">
				<c:forEach items="${list }" var="seller">
					<option value="${seller.sellerId }">${seller.sellerName }</option>
				</c:forEach>
			</select> <label class="search-label">选择分公司：</label> <select id="sStoreId"
				class="selectpicker pull-left p-l-5" multiple="multiple"
				data-width="12%">
				<c:forEach items="${listStore }" var="store">
					<option value="${store.storeid }">${store.title }</option>
				</c:forEach>
			</select> 
			
			<label class="search-label">按开店时间：</label> <input type="text"
				id="sBeginDate" autocomplete="off" value=""
				class="form-control search-input width120 datetimepicker"
				data-format="yyyy-mm-dd" > <label
				class="search-label">至</label><input type="text" id="sEndDate"
				autocomplete="off" value=""
				class="form-control search-input width120 datetimepicker"
				data-format="yyyy-mm-dd" >
			
			<shiro:hasPermission name="dict:store:tong:doExcel">
				<button onclick="doExcel();" class="btn btn-success pull-right">导出</button>
			</shiro:hasPermission>
			<div class="clearfix"></div>
		</div>
		<div class="title-top col-lg-12">

			<label class="search-label">分公司状态：</label>
			<div class="search-input">
				<select id="sState" class="selectpicker" data-width="150">
					<option value="0">全部</option>
					<option value="1">上线审核中</option>
					<option value="2">上线</option>
					<option value="3">下线</option>
					<option value="4">已驳回</option>
				</select>
			</div>
			<button class="btn btn-success search-btn" onclick="query();">确定</button>
			<button class="btn btn-success search-btn" onclick="reset();">重置</button>
			<div class="clearfix"></div>
		</div>
		<div class="col-lg-12 title-top">
			<div class="col-lg-12">
				<div class="text-muted single-line-text pull-left">
					共 <font color="#428bca" id="dataCount">0</font> 条记录
				</div>

				<div style="float: right; margin-right: 30px;">
					<div class="text-muted single-line-text pull-right">
						销售额： 日&nbsp;&nbsp;<input type="radio" class="radioItem"
							id="state1" name="state" value="1" /> &nbsp;&nbsp;周&nbsp;&nbsp;<input
							type="radio" class="radioItem" id="state2" name="state" value="2" />
						&nbsp;&nbsp;月&nbsp;&nbsp;<input type="radio" class="radioItem"
							id="state3" name="state" value="3" />
					</div>
				</div>
			</div>
			<div class="table-responsive panel panel-default">
				<table id="dataTable"
					class="table table-striped table-hover table-noellipsis table-bordered"
					style="overflow: scroll;">
					<thead>
						<tr>
							<th width="100px;">分公司ID</th>
							<th width="200px;">分公司名称</th>
							<th width="100px;">主营范围</th>
							<th width="200px;">所属公司</th>
							<th width="100px;">开店时间</th>
							<th width="100px;">分公司联系人</th>
							<th width="120px;">联系电话</th>
							<th width="100px;">普通产品数量</th>
							<th class="sort" style="width: 150px;">普通订单量 <a
								class="querySort"> <i class="down"></i> <input type="radio"
									name="radioState" value="1" class="downSort"
									onclick="query1(1)">
							</a> <a class="querySort"> <i class="down"></i> <input
									type="radio" name="radioState" value="2" class="upSort"
									onclick="query1(2)">
							</a>
							</th>
							<th class="sort" style="width: 150px;">普通销售金额 <a
								class="querySort"> <i class="down"></i> <input type="radio"
									name="radioState" value="3" class="downSort"
									onclick="query1(3)">
							</a> <a class="querySort"> <i class="down"></i> <input
									type="radio" name="radioState" value="4" class="upSort"
									onclick="query1(4)">
							</a>
							</th>
							<th width="100px;">分公司状态</th>
							<th width="150px;">操作</th>
						</tr>
					</thead>
					<tbody id="dataList"></tbody>
				</table>
			</div>
			<div class="col-lg-12">
       			<div class = "pull-right">
        			<div class="text-muted  pull-left" style="margin-top:20px; margin-right:18px;">
						<select id="pageSize" name="pageSize" class="selectpicker" data-width="100" onchange="query()" >
	    					<option value="10" selected = "selected">10条/页</option>
							<option value="15">15条/页</option>
							<option value="20">20条/页</option>
							<option value="50">50条/页</option>
							<option value="100">100条/页</option>
	    				</select>
					</div>
	        		<ul id="dataPagination" class="pagination-sm pull-right"></ul>
	        	</div>
        	</div>
		</div>
	</div>
	<jsp:include page="../../../include/javascripts.jsp"></jsp:include>
	<!-- 异步加载下一页数据后，用模板渲染 -->
	<script type="text/html" id="dataTpl">
	{{each list as item}}
	<tr id="item{{item.id}}" data-id="{{item.id}}">
		<td>{{item.storeid}}</td>
		<td>{{item.title}}</td>
		<td>{{item.scope | flagTransform:1,'常规',2,'团购',3,'常规+团购'}}</td>
		<td>{{item.sellerName}}</td>
		<td>{{item.starttime }}</td>
		<td>{{item.aname}}</td>
		<td>{{item.aphone}}</td>
		<td>{{item.countGoods}}</td>
		<td>{{item.countNum}}</td>
		<td>{{item.countMoney}}</td>
		{{if item.qstate==1}}
			{{if item.state==1}}
			 <td>上线审核中</td>
			{{else if item.state==2}}
			 <td>上线</td>
			{{else if item.state==3}}
		 	 <td>下线</td>
			{{else if item.state==4}}
			 <td>驳回</td>
			{{/if}}
		{{else if item.qstate==2}}
		<td >禁货</td>
		{{else if item.qstate==3}}
		<td >降权</td>
		{{/if}}
		<td>
			<a href="javascript:showStore('{{item.storeid}}');"><span class="btn">详情</span></a>
			<a href="javascript:edit('{{item.storeid}}');"><span class="btn">编辑</span></a>
		</td>
	</tr>
	{{/each}}
</script>
	<script type="text/javascript">
var dataPaginator;
$(query);
function query(){
	var pageSize=$("#pageSize").val();
	var  sSellerId = $("#sSellerId").val(),sStoreId = $("#sStoreId").val();
	var sell,store;
	if(sSellerId !=null && sSellerId !="" && sSellerId !=undefined){
		sell=sSellerId.join("','");
	}
	if(sStoreId !=null && sStoreId !="" && sStoreId !=undefined){
		store=sStoreId.join("','");
	}
	var params = {
		pageSize:pageSize,
		storeIds:$("#sGoodId").val(),
		sellerId:sell,
		sStoreId:store,
		sBeginDate:$("#sBeginDate").val(),
		sEndDate:$("#sEndDate").val(),
		state:$("#sState").val(),
	};
	if(dataPaginator){
		dataPaginator.destroy();
	}
	dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/dict/store/tong/page",params,function(result){
		//设置显示最新的数据数量
		$("#dataCount").html(result.object.totalRow);
		//根据模板渲染数据并填充
		$("#dataList").empty().append(template("dataTpl",result.object));
	});
}
/**
 * 搜索排序与默认排序冲突故分成二个方法
 */
function query1(index){
	var pageSize=$("#pageSize").val();
	var  sSellerId = $("#sSellerId").val(),sStoreId = $("#sStoreId").val();
	var sell,store;
	if(sSellerId !=null && sSellerId !="" && sSellerId !=undefined){
		sell=sSellerId.join("','");
	}
	if(sStoreId !=null && sStoreId !="" && sStoreId !=undefined){
		store=sStoreId.join("','");
	}
	var params = {
		pageSize:pageSize,
		storeIds:$("#sGoodId").val(),
		sellerId:sell,
		sStoreId:store,
		sBeginDate:$("#sBeginDate").val(),
		sEndDate:$("#sEndDate").val(),
		state:$("#sState").val(),
		index:index
	};
	if(dataPaginator){
		dataPaginator.destroy();
	}
	dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/dict/store/tong/page1",params,function(result){
		//设置显示最新的数据数量
		$("#dataCount").html(result.object.totalRow);
		//根据模板渲染数据并填充
		$("#dataList").empty().append(template("dataTpl",result.object));
	});
}

var detailDialog;
function showStore(id){
	detailDialog = Kit.dialog("查看详情","${BASE_PATH}/dict/store/detail?storeid="+id,{closable:true}).open();
}
var editDialog;
function edit(storeid){
	editDialog = Kit.dialog("编辑分公司","${BASE_PATH}/dict/store/tong/toEdit?storeid="+storeid,{closable:true,size:"size-wide:100px"}).open();
}
function onEditSuccess(newObject){
	$("#item"+newObject.id).replaceWith(template("dataTpl",{"list":[newObject]}));
} 
$(document).ready(function() {
    $(".radioItem").change(function() {
    	 var $selectedvalue = $("input[name='state']:checked").val();
    		var  sSellerId = $("#sSellerId").val(),sStoreId = $("#sStoreId").val();
    		var sell,store;
    		if(sSellerId !=null && sSellerId !="" && sSellerId !=undefined){
    			sell=sSellerId.join("','");
    		}
    		if(sStoreId !=null && sStoreId !="" && sStoreId !=undefined){
    			store=sStoreId.join("','");
    		}
    	 var params = {
   				pageSize:10,
   				storeIds:$("#sGoodId").val(),
   				sellerId:sell,
   				sStoreId:store,
   				sBeginDate:$("#sBeginDate").val(),
   				sEndDate:$("#sEndDate").val(),
   				state:$("#sState").val(),
   				date:$selectedvalue
   			};
   			if(dataPaginator){
   				dataPaginator.destroy();
   			}
   			dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/dict/store/tong/xspage",params,function(result){
   				//设置显示最新的数据数量
   				$("#dataCount").html(result.object.totalRow);
   				//根据模板渲染数据并填充
   				$("#dataList").empty().append(template("dataTpl",result.object));
   			});
    });
});
function reset(){
	$("#sGoodId").val("");$("#sBeginDate").val("");$("#sEndDate").val("");$("#sTel").val("");
	$("#sSellerId").val("");$("#sSellerId").trigger("change");  $("#sStoreId").val("");$("#sStoreId").trigger("change");  $("#sState").val("0");$("#sState").trigger("change");
	$("#sStoreId").selectpicker("refresh"); $("#sSellerId").selectpicker("refresh");
}
function doExcel(){
	var $selectedvalue = $("input[name='state']:checked").val();
	if($selectedvalue==undefined){
		$selectedvalue =0;
	}
	var storeIds=$("#sGoodId").val(),sSellerId=$("#sSellerId").val(),sStoreId=$("#sStoreId").val(),sBeginDate=$("#sBeginDate").val(),sEndDate=$("#sEndDate").val(),state=$("#sState").val();
	var sell="",store="";
	if(sSellerId !=null && sSellerId !="" && sSellerId !=undefined){
		sell=sSellerId.join("','");
	}
	if(sStoreId !=null && sStoreId !="" && sStoreId !=undefined){
		store=sStoreId.join("','");
	}
	window.location.href="${BASE_PATH}/dict/store/tong/doExcel?storeIds="+storeIds+"&sellerId="+sell+"&sStoreId="+store+"&sBeginDate="+sBeginDate+"&sEndDate="+sEndDate+"&date="+$selectedvalue+"&state="+state;
}
$("#sSellerId").change(function(){
	 var sSellerId=[];
	  sSellerId=$("#sSellerId").val();
	  $.ajax({
                type: "POST",
                url: "${BASE_PATH}/bus/goods/base/chooseStore",
                data: {"sSellerId" : sSellerId},
                dataType: "json",
                traditional: true,
                success: function(data){
               	 $("#sStoreId").empty();
                          for(var i=0; i<data.object.length;i++){
                         	 $("#sStoreId").append("<option value='"+data.object[i].storeid+"'>"+data.object[i].title+"</option>");
                          }
                          $("#sStoreId").selectpicker("refresh");
                      }
            });
       }); 
$("#sBeginDate").datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    minuteStep:1,
    minView:'hour',
    language: 'zh-CN',
    pickerPosition:'bottom-right',
    autoclose:true,
}).on("click",function(){
	var d2=new Date();
	var d=$("#sEndDate").val();
	if(d==""){
		 $("#sBeginDate").datetimepicker("setEndDate",d2);
	}else{
		var d1=new Date(d); 
		d1.setDate(d1.getDate()-1);
		if(d1>d2){
	  	 	 $("#sBeginDate").datetimepicker("setEndDate",d2);
		}else{
			 $("#sBeginDate").datetimepicker("setEndDate",d1);
		}
	}
});

$("#sEndDate").datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    minuteStep:1,
    minView:'hour',
    language: 'zh-CN',
    autoclose:true,
	}).on("click",function(){
		var d=$("#sBeginDate").val();
		var d1=new Date(d); 
		d1.setDate(d1.getDate()+1); 
		$("#sEndDate").datetimepicker("setStartDate",d1);
	});
	
 $(document).on("click","#sEndDate",function(){
    	$('#sEndDate').datetimepicker('show');
    });

$(document).on("click","#sBeginDate",function(){
	$('#sBeginDate').datetimepicker('show');
});

//积分”、“惠券”、“抵扣券单选图片点击切换
var querySort=document.getElementsByClassName("querySort");//点击区域
var down=document.getElementsByClassName("down");
for(var i=0;i<querySort.length;i++){
	   //给每个class添加id标识(当索引)区分每个class
	   querySort[i].id=i;	   
	   //鼠标点击改变背景图片偏移
	   querySort[i].onclick=function(){
		   //当前索引
		   var index=this.id;
		   for( j=0;j<down.length;j++){
			   down[j].style.backgroundPosition="0px 61px";
		   }
		 //改变索引为当前的class背景图片偏移位置
		   down[index].style.backgroundPosition="0px 21px";		 
	   }
}
</script>
</body>
</html>